<template>
  <div ref="warp" class="contentWarpBox">
    <div class="searchInfo lfet">
      <el-select
        v-model="getSearchInfo.terminal"
        style="marginRight:3px;"
        clearable
        placeholder="请选择终端"
      >
        <el-option
          v-for="terminal in terminals"
          :key="terminal.key"
          :label="terminal.text"
          :value="terminal.key"
        />
      </el-select>
      <el-input
        v-model="getSearchInfo.keyword"
        placeholder="请输入日志内容"
        style="width:200px;marginLeft:3px;"
        :class="$style.Business"
      />
      <el-button type="primary" style="marginLeft:3px;" @click="searchInfoMation">搜 索</el-button>
    </div>
    <el-table ref="table" :data="tableData" border stripe :height="this.$getTableHeight">
      <el-table-column :show-overflow-tooltip="true" label="编号">
        <template slot-scope="scope">{{ scope.row.id ? scope.row.id :'&nbsp;' }}</template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="timeStamp" label="日志时间" />
      <el-table-column :show-overflow-tooltip="true" prop="message" label="日志内容" />
      <el-table-column :show-overflow-tooltip="true" prop="userName" label="操作人" />
      <el-table-column :show-overflow-tooltip="true" prop="ip" label="IP" />
      <el-table-column :show-overflow-tooltip="true" prop="terminal" label="终端" />
    </el-table>
    <div class="pagination">
      <Pagination
        class="right"
        :total-count="totalCount"
        :page-size="page.pageSize"
        :current-page="page.pageNo"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import mmUrl from '~/utils/utilUrl';
import {
  _currentChange,
  _sizeChange,
  _changeTable,
  _searchInfo,
  changeTableHeight
} from '~/utils/util';
import Pagination from '~/components/commom/pagination';
export default {
  components: {
    Pagination
  },
  data() {
    return {
      visible2: false,
      loading: true,
      changeSelectOr: false,
      change: false,
      dics: [],
      orgs: [],
      defaultProps: {
        children: 'children',
        label: 'orgName'
      },
      projectType: [],
      tableData: [], // talbe表格数据
      category: [],
      terminals: [],
      totalCount: 0,
      getSearchInfo: {
        // 筛选条件
        keyword: '',
        terminal: ''
      },
      copyGetSearchInfo: {
        // 筛选条件
        keyword: '',
        terminal: ''
      },
      page: {
        maxResultCount: 0,
        pageNo: 0,
        pageSize: 20,
        skipCount: 0
      }
    }
  },
  mounted() {
    this.initGetData()
  },
  methods: {
    initGetData(res) {
      let data = {}
      if (res) {
        data = res
      } else {
        data.page = JSON.parse(JSON.stringify(this.page))
        Object.assign(data, this.copyGetSearchInfo)
      }
      this.$post({
        url: mmUrl.operat.pageLoad,
        data: data
      }).then(res => {
        this.totalCount = res.items.totalCount
        this.tableData = res.items.items
        this.loading = false
        this.terminals = res.terminals
        changeTableHeight(this)
      })
    },
    searchInfoMation(res) {
      this.copysearInfo = JSON.parse(JSON.stringify(this.searInfo))
      const result = _searchInfo(res, this.page, this.copysearInfo)
      this.changeTableData(result)
    },
    handleSizeChange(val) {
      const result = _sizeChange(val, this.page, this.copysearInfo)
      this.changeTableData(result)
    },
    handleCurrentChange(val) {
      const result = _currentChange(val, this.page, this.copysearInfo)
      this.changeTableData(result)
    },
    changeTableData(res) {
      const that = this
      _changeTable(mmUrl.memberLevel.get, res, that)
    }
  }
}
</script>

<style lang="scss" module>
.cont_top {
  height: 5 0px;
  .cost {
    display: inline-block !important;
    width: 102px;
  }
  .Business {
    width: 120px;
  }
  .cartgroy {
    display: inline-block !important;
    width: 120px;
  }
  input {
    border-radius: 5px;
  }
}
</style>

